<template>
  <div class="app-container">
    <header-search class="g-w100 g-h100 colon mainSearchPanel">
      <qjtitle :title="title"></qjtitle>
      <el-form ref="queryForm" :inline="true">
        <qjsjfw @fun="sjfwfun"></qjsjfw>
        <el-form-item label="电话">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sel_dh">
            <el-option v-for="({ sjxdm, sjxmc }) in ssxl1" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="ip">
          <el-select filterable clearable placeholder="请选择" v-model="queryParams.sel_ipdz">
            <el-option v-for="({ sjxdm, sjxmc }) in ssxl2" :key="sjxdm" :label="sjxmc" :value="sjxdm">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="buttonArea">
          <el-button type="primary" icon="el-icon-search" @click="getListData"> 查询 </el-button>
          <el-button icon="el-icon-refresh" class="commonBtn" @click="resetQuery"> 重置 </el-button>
        </el-form-item>
      </el-form>
    </header-search>

    <page-panel-new class="mainListPanel">
      <el-table ref="table-main" :data="zbdata" height="calc(100% - 113px)" :loading="bgLoading" border >
        <el-table-column label="序号" type="index" width="50" />
        <el-table-column label="反馈内容" align="center" prop="rymc" show-overflow-tooltip width="180"  />
        <el-table-column label="电话" align="center" prop="hdrq" show-overflow-tooltip width="180"  />
        <el-table-column label="邮件" align="center" prop="hdrq" show-overflow-tooltip width="180"  />
        <el-table-column label="IP地址" align="center" prop="hdrq" show-overflow-tooltip width="180"  />
        <el-table-column label="反馈时间" align="center" prop="hdrq" show-overflow-tooltip width="180"  />
        <el-table-column label="附件" align="center" prop="hdrq" show-overflow-tooltip width="180"  />
      </el-table>
      <qjfy :total='total' @fun="qjfyfun"></qjfy>
    </page-panel-new>

  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import {
  getListData,
  getListData_fj,
  getSelectorData,
  submit,
  submit_delete,
  downloadFile,
} from '@/api/syfxxtApi/zxrcsw/yjfkck/api.js'


export default Vue.extend({
  name: 'Zxrcsw-Yjfkck',
  data() {
    return {
      ssxl2: [], //查询选择器 下拉数据
      ssxl1: [], //查询选择器 下拉数据
      keycz: 0, //附件上传key
      fileList: [],
      fileList_fj: [],
      title: '意见反馈查看', //页面标题
      dialogTitle: '', // 弹框标题
      bgLoading: false, // 表格加载状态
      Open1: false, //弹框状态
      zbdata: [], //主表格数据
      selectorData_rymc: [],//查询选择器 下拉数据
      optype: 'xz', //操作类型
      xzsj: {}, //选中的数据
      
      formDisable: false, //表单禁用状态
      queryParams: {
        sel_qsrq: null,
        sel_jzrq: null,
        sel_dh: '',
        sel_ipdz: '',
         pageNum: 1,
        pageSize: 20,
      }, //查询参数
      total: 0,

    }
  },
  computed: {

  },
  watch: {
    optype: {
      handler(newVal, oldVal) {
        if (newVal == 'ck') {
          this.formDisable = true;
        } else {
          this.formDisable = false;
        }
      },
      deep: true,
    },
    queryParams: {
      handler(newVal, oldVal) {
        this.getxlsj1();
      },
      deep: true,
    },
  },
  mounted() {
    this.getListData();
    this.getSelectorData_bt();
  },
  methods: {
    //获取 选择器数据
    getSelectorData_bt() {
      try {
        const param = {
          // 
        };
        getSelectorData("dh", param).then((res) => {
          if (res.success) {
            this.ssxl1 = res.rows;
          } else {
            this.ssxl1 = [];
          }
        })
        getSelectorData("ipdz", param).then((res) => {
          if (res.success) {
            this.ssxl2 = res.rows;
          } else {
            this.ssxl2 = [];
          }
        })
      } catch (error) {
        console.warn('接口提示', error);
      }
    },
    //获取主表格查询数据
    qjfyfun(e) {//分页
      this.queryParams.start = e.start;
      this.queryParams.limit = e.limit;
    },
    getListData() {
      try {
        this.bgLoading = true
        getListData(this.queryParams).then((res) => {
          if (res.success) {
            this.zbdata = res.rows;
            this.total = res.total;
          } else {
            this.zbdata = []
            this.$message.error({ content: '请重新搜索!', placement: 'center' })
          }
        })
      } catch (error) {
        this.bgLoading = false;
        console.warn('接口提示', error);
      }
    },
    sjfwfun(e, e1) {//日期范围选择器事件
      this.queryParams.sel_qsrq = e;
      this.queryParams.sel_jzrq = e1;
    },
    
    //查询参数重置按钮事件
    resetQuery() {
      this.queryParams={
        sel_dh: '',
        sel_ipdz: '',
         pageNum: 1,
        pageSize: 20,
      };
      this.getListData()
    },

  },
})
</script>
<style lang="less" scoped>
.app-container {
  height: 100%;

  .el-table {
    overflow: scroll;
  }
}

::v-deep .el-dialog__body {
  max-height: 60vh;
  overflow-y: auto;
}

/deep/ .is-left>div {
  text-align: left;
}

/deep/ .is-right>div {
  text-align: right;
}

/deep/ .is-left>div {
  text-align: left;
}

/deep/ .is-center>div {
  text-align: center;
}

::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner,
::v-deep .el-radio.is-disabled .el-radio__inner,
::v-deep .el-radio.is-disabled .el-radio__label,
::v-deep .el-checkbox.is-disabled .el-checkbox__inner,
::v-deep .el-checkbox.is-disabled .el-checkbox__label {
  background-color: #f6f6f6 !important;
  /* 示例：改变背景颜色 */
  color: #333 !important;
  /* 示例：改变文字颜色 */
}

::v-deep .el-upload.el-upload--text {
  margin: 0 !important;
}

.mainSearchPanel .page-header-title {
  font-size: 16px;
  color: #409EFF;
  font-weight: bolder;
  display: block;
  margin: 0;
  padding: 0;
  margin: 10px 0;
}

.mainSearchPanel .el-divider--horizontal {
  margin: 0 !important;
  margin-top: 10px;
}
</style>
